<template>
    <div>
        <el-card >
            <div v-show="!open">
                <!--       搜索框 -->
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" clearable v-model="queryInfo.queryString" class="input-with-select" @clear="findPage">
                            <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button style="margin-left: 10px"  @click="insert" type="primary">添加信息</el-button>
                    </el-col>
                </el-row>
                <!--管理员不能删除比自己等级高和自己平级的用户未完成p54-->
                <!--        展示列表 加载效果未完成-->
                <el-table
                    :data="tableList"
                    stripe
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" >
                    <el-table-column prop="id" label="序号" />
                    <el-table-column prop="username" label="用户名"/>
                    <el-table-column prop="nickName" label="姓名"/>
                    <el-table-column prop="sex" label="性别" :formatter="formatSex"/>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="scope.row.avatar"
                                :preview-src-list="preview(scope.row.avatar)">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column  label="角色标签">
                        <template slot-scope="scope">
                            <el-tag size="mini" v-for="(item,index) in scope.row.roles" :key="index">{{item.label}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户状态" >
                        <template slot-scope="scope">
                            <el-switch @change="updateStatus(scope.row)" v-model="scope.row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="phoneNumber" label="电话号码"/>
                    <el-table-column prop="email" label="邮箱"/>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip/>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="update(scope.row) " size="small" icon="el-icon-edit" circle/>
                            <el-button type="danger" @click="deleteById(scope.row.id)" size="small" icon="el-icon-delete" circle/>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        分页插件-->
                <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePageNumber"
                    :current-page="currentPage4"
                    :page-sizes="[4, 25, 50, 100]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
            </div>
        
            <handle v-show="open" :title="title" :form="form" @cancel="cancel" />
        </el-card>
    </div>
</template>

<script>
import {mapState} from "vuex"
import handle from './handle.vue';
export default {
    components:{
         handle
    },
    data() {
        return {
            //分页查询条件
            queryInfo: {
                //页码
                pageNumber: 1,
                //页数
                pageSize: 4,
                //关键字
                queryString: ""
            },
            //表格数据
            tableList:[],
            //总记录数
            total: 0,
            
            currentPage4: 1,
            //弹窗标题
            title: null,
            //是否打开会话框
            open: false,
            //表单数据
            form: {
                status: true
            },
            
            //用户列表
            roles: [],
            loading:false,
        }
    },
    methods:{
        /*取消弹框*/
        cancel(val){
            this.form = {};
            this.open = false;
            this.findPage();
        },
        
        /*头像预览*/
        preview(src){
            let arr = [];
            arr.push(src);
            return arr;
        },
        
        /*性别格式化*/
        formatSex(row){
            if (row.sex === 0){
                return "男"
            }else if (row.sex === 1){
                return "女"
            }else{
                return "未知"
            }
        },
        
        /****************************/
        /*添加用户信息*/
        insert(){
            this.title = "添加用户";
            this.form = {};
            this.open = true;
        },
        /*删除用户信息*/
        deleteById(id){
            this.$confirm('您将永久删除id是{' + id +' }的用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用后端删除用户接口
                this.$ajax.delete(`/user/delete/${id}`).then(res => {
                    this.$message.success(res.data.message);
                    this.queryInfo.pageNumber = 1;
                    this.findPage();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /*修改用户信息*/
        update(row){
            this.form = row;
            this.title = "修改用户";
            this.open = true;
        },
        /*改变用户数据的状态*/
        updateStatus(row){
            this.$ajax.put('/user/update',row).then((res)=>{
                this.$message.success("状态更新成功！")
            })
        },
        /*分页查询用户信息*/
        findPage(){
            this.loading = true;
            this.$ajax.post("/user/findPage", this.queryInfo).then((res)=>{
                this.tableList = res.data.rows;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        /*页面改变事件*/
        handlePageNumber(newPageNumber){
            //将分页的新数据的参数传递给后端查询
            this.queryInfo.pageNumber = newPageNumber;
            //调分页方法
            this.findPage();
        },
        handlePageSize(newPageSize){
            this.queryInfo.pageSize = newPageSize;
            this.findPage();
        },
    },
    created() {
        this.findPage();
    }
    

};
</script>

<style scoped>

</style>